<template>
  <a-form class="smart-query-form">
    <a-row class="smart-query-form-row">
      <a-form-item label="名称" class="smart-query-form-item">
        <a-input style="width: 200px" v-model:value="queryParam.providerName" allowClear placeholder="请输入名称" />
      </a-form-item>
      <a-form-item class="smart-query-form-item smart-margin-left10">
        <a-button-group>
          <a-button type="primary" @click="onSearch">
            <template #icon>
              <ReloadOutlined />
            </template>
            查询
          </a-button>
          <a-button @click="resetQuery">
            <template #icon>
              <SearchOutlined />
            </template>
            重置
          </a-button>
        </a-button-group>
        <a-button type="primary" @click="add" class="smart-margin-left20">
          <template #icon>
            <PlusOutlined />
          </template>
          新建
        </a-button>
      </a-form-item>
    </a-row>
  </a-form>

  <a-card size="small" :bordered="true">
    <a-table
      size="small"
      bordered
      :loading="tableLoading"
      rowKey="id"
      :columns="columns"
      :data-source="tabData"
      :pagination="false"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    >
      <template #bodyCell="{ record, column }">
        <template v-if="column.dataIndex === 'icon'">
          <div>
            <img :src="record.icon" alt="" srcset="" style="width: 32px; height: 32px" />
          </div>
        </template>
        <template v-if="column.dataIndex === 'display'">
          <span v-if="record.display == 'true'"> 显示 </span>
          <span v-else> 隐藏 </span>
        </template>
        <template v-if="column.dataIndex === 'scanCode'">
          <span v-if="record.scanCode == 'true'"> 是 </span>
          <span v-else> 否 </span>
        </template>
        <template v-if="column.dataIndex === 'status'">
          <span v-if="record.status == 1">
            <check-circle-two-tone />
          </span>
          <span v-else> </span>
        </template>

        <template v-if="column.dataIndex === 'action'">
          <div class="smart-table-operate">
            <a-button @click="updateRecord(record.id)" type="link">编辑</a-button>
            <a-button danger @click="deleterRecord(record.id)" type="link">删除</a-button>
          </div>
        </template>
      </template>
    </a-table>
    <div style="float: right; margin: 10px 0">
      <a-pagination
        v-model:current="queryParam.pageNumber"
        v-model:page-size="queryParam.pageSize"
        :page-size-options="pageSizeOptions"
        :total="queryParam.total"
        show-size-changer
        @showSizeChange="onShowSizeChange"
        @change="onSizeChange"
      >
      </a-pagination>
    </div>

    <a-modal v-model:visible="visible" :title="title" @ok="handleOk" style="width: 50%">
      <a-form ref="formRef" :model="form" :rules="rules" :labelCol="{ span: 6 }">
        <a-row>
          <a-col :span="12">
            <a-form-item label="编码">
              <a-input style="width: 100%" placeholder="请输入编码" v-model:value="form.id" :disabled="disabledCode" />
            </a-form-item>
            <a-form-item label="图标" name="icon">
              <a-input style="width: 100%" placeholder="请输入图标" v-model:value="form.icon" />
            </a-form-item>
            <a-form-item label="提供者" name="provider">
              <a-input style="width: 100%" placeholder="请输入提供者" v-model:value="form.provider" />
            </a-form-item>
            <a-form-item label="名称" name="providerName">
              <a-input style="width: 100%" placeholder="请输入名称" v-model:value="form.providerName" />
            </a-form-item>
            <a-form-item label="是否显示">
              <a-radio-group v-model:value="form.display">
                <a-radio-button value="false">否</a-radio-button>
                <a-radio-button value="true">是</a-radio-button>
              </a-radio-group>
            </a-form-item>
            <a-form-item label="排序" name="sortIndex">
              <a-input style="width: 100%" placeholder="请输入排序" v-model:value="form.sortIndex" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="凭证" name="clientId">
              <a-input style="width: 100%" placeholder="请输入凭证" v-model:value="form.clientId" />
            </a-form-item>
            <a-form-item label="密钥" name="clientSecret">
              <a-input style="width: 100%" placeholder="请输入密钥" v-model:value="form.clientSecret" />
            </a-form-item>
            <a-form-item label="AgentId" name="agentId">
              <a-input style="width: 100%" placeholder="请输入agentId" v-model:value="form.agentId" />
            </a-form-item>
            <a-form-item label="扫码登陆" name="scanCode">
              <a-radio-group v-model:value="form.scanCode">
                <a-radio-button value="false">否</a-radio-button>
                <a-radio-button value="true">是</a-radio-button>
              </a-radio-group>
            </a-form-item>
            <a-form-item label="状态" name="status">
              <a-switch v-model:checked="form.status">
                <template #checkedChildren><check-outlined /></template>
                <template #unCheckedChildren><close-outlined /></template>
              </a-switch>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </a-card>
</template>

<script setup>
import { onMounted, reactive, ref, watch, createVNode } from 'vue';
import { socialsproviderApi } from '/src/api/security/social/api';
import { Modal, message } from 'ant-design-vue';

import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import _ from 'lodash';
import { SmartLoading } from '/src/components/framework/smart-loading';
import { smartSentry } from '/src/lib/smart-sentry';

// -----------------------  筛选 ---------------------
const queryParam = ref({
  providerName: '',
  pageSize: 10,
  pageNumber: 1,
  total: 0,
});

async function handleOk() {
  form.status = form.status ? 1 : 0;
  if (disabledCode.value) {
    let res = await socialsproviderApi.updateSocialsProviderById(form);

    if (res.code == 0) {
      message.success('修改成功');
    } else {
      message.error('修改失败');
    }
  } else {
    let res = await socialsproviderApi.addSocialsProvider(form);

    if (res.code == 0) {
      message.success('新建成功');
    } else {
      message.error('新建失败');
    }
  }

  visible.value = false;
  init();
}

// ----------------------- 表单 ---------------------

const formRef = ref();

const disabledCode = ref(false);

const formDefault = {
  id: undefined,
  icon: undefined,
  provider: undefined,
  providerName: undefined,
  clientId: undefined,
  clientSecret: undefined,
  agentId: undefined,
  scanCode: 'false',
  display: 'false',
  sortIndex: 1,
  status: 0,
};

let form = reactive({ ...formDefault });

// 表单规则
const rules = {
  // icon: [{ required: true, message: '请输入图标' }],
  // provider: [{ required: true, message: '请输入提供者' }],
  // providerName: [{ required: true, message: '请输入名称' }],
  // clientId: [{ required: true, message: '请输入凭证' }],
  // clientSecret: [{ required: true, message: '请输入密钥' }],
  // agentId: [{ required: true, message: '请输入agentId' }],
  // scanCode: [{ required: true, message: '请选择扫码登陆' }],
  // sortIndex: [{ required: true, message: '请输入排序' }],
  // status: [{ required: true, message: '请选择状态' }],
};

const visible = ref(false);
const title = ref('');
const onShowSizeChange = (current, pageSize) => {
  queryParam.value.pageNumber = current;
  queryParam.value.pageSize = pageSize;
  init();
};
const onSizeChange = (page, pageSize) => {
  queryParam.value.pageNumber = page;
  queryParam.value.pageSize = pageSize;
  init();
};

function add() {
  form.id = undefined;
  form.icon = undefined;
  form.provider = undefined;
  form.providerName = undefined;
  form.clientId = undefined;
  form.clientSecret = undefined;
  form.agentId = undefined;
  form.scanCode = 'false';
  form.display = 'false';
  form.sortIndex = 1;
  form.status = 0;
  title.value = '新建';
  visible.value = true;
  disabledCode.value = false;
}
//

// ----------------------- 部门树的展示 ---------------------
const tableLoading = ref(false);

const tabData = ref([]);

const pageSizeOptions = ref(['10', '20', '30', '40', '50']);
const onSelectChange = (selectedRowKeys) => {
  // state.selectedRowKeys = selectedRowKeys;
};

const columns = ref([
  {
    title: '图标',
    dataIndex: 'icon',
    key: 'icon',
  },
  {
    title: '提供者',
    dataIndex: 'provider',
    key: 'provider',
  },
  {
    title: '名称',
    dataIndex: 'providerName',
    key: 'providerName',
  },
  {
    title: '排序',
    dataIndex: 'sortIndex',
  },
  {
    title: '是否显示',
    dataIndex: 'display',
    key: 'display',
  },
  {
    title: '扫码登录',
    dataIndex: 'scanCode',
    key: 'scanCode',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
  },

  {
    title: '操作',
    dataIndex: 'action',
    fixed: 'right',
    width: 200,
  },
]);

onMounted(() => {
  init();
});

// 查询部门列表并构建 部门树
async function init() {
  try {
    tableLoading.value = true;
    let res = await socialsproviderApi.getsocialsprovider(queryParam.value);
    if (res.code == 0) {
      tabData.value = res.data.rows;
      queryParam.value.total = res.data.records;
    }
  } catch (e) {
    smartSentry.captureError(e);
  } finally {
    tableLoading.value = false;
  }
}

// 重置
function resetQuery() {
  queryParam.value.providerName = '';
  queryParam.value.pageSize = 10;
  queryParam.value.pageNumber = 1;
  queryParam.value.total = 0;
  onSearch();
}

// 搜索
function onSearch() {
  init();
}

// ----------------------- 表单操作：添加部门/修改部门/删除部门/上下移动 ---------------------

// 编辑
function updateRecord(e) {
  getRecordById(e);
  title.value = '编辑';
  visible.value = true;
}

async function getRecordById(id) {
  let res = await socialsproviderApi.getSocialsProviderById(id);
  disabledCode.value = true;
  if (res.code == 0) {
    form.id = res.data.id;
    form.icon = res.data.icon;
    form.provider = res.data.provider;
    form.providerName = res.data.providerName;
    form.clientId = res.data.clientId;
    form.clientSecret = res.data.clientSecret;
    form.agentId = res.data.agentId;
    form.scanCode = res.data.scanCode;
    form.display = res.data.display;
    form.sortIndex = res.data.sortIndex;
    form.status = res.data.status;
  }
}

// 删除
function deleterRecord(id) {
  Modal.confirm({
    title: '提醒',
    icon: createVNode(ExclamationCircleOutlined),
    content: '确定要删除吗?',
    okText: '删除',
    okType: 'danger',
    async onOk() {
      SmartLoading.show();
      try {
        await socialsproviderApi.deleteSocialsProvider(id);
        init();
      } catch (error) {
        smartSentry.captureError(error);
      } finally {
        SmartLoading.hide();
      }
    },
    cancelText: '取消',
    onCancel() {},
  });
}
</script>

<style scoped lang="less"></style>